<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>pepsi.com</title>
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <link rel="shortcut icon" href="images/logo-large.png" type="image/x-icon">
    <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.8.2/css/all.min.css">
    <link rel="stylesheet" href="swiper-4.5.0/dist/css/swiper.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/Pepsi.css">
</head>
<body>
<header>
<div class="fixed-top">
    <nav class="navbar navbar-expand-lg navbar-light">
        <a class="navbar-brand" href="#"><img src="images/logo-large.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">VIEW PRODUCTS<span class="sr-only">(current)</span></a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <a class="dropdown-item" href="#">Action</a>
                        <a class="dropdown-item" href="#">Another action</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#">Something else here</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">WHAT&#039;S NEW</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Contact%20Pepsi.html">
                        NEWSLETTER
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Featured%20Pepsi.html">CONTACT US</a>
                </li>
            </ul>
            <button class="btn btn-outline-light my-2 my-sm-0 btn1">
                <span class="character character1 ml-2">B<p></p>B<br></span>
                <span class="character character2">U<p></p>U<br></span>
                <span class="character character3">Y<p></p>Y<br></span>
                <span class="character character4">P<p></p>P<br></span>
                <span class="character character5">E<p></p>E<br></span>
                <span class="character character6">P<p></p>P<br></span>
                <span class="character character7">S<p></p>S<br></span>
                <span class="character character8">I<p></p>I<br></span>
                <span class="character character9">P<p></p>P<br></span>
                <span class="character character10">R<p></p>R<br></span>
                <span class="character character11">O<p></p>O<br></span>
                <span class="character character12">D<p></p>D<br></span>
                <span class="character character13">U<p></p>U<br></span>
                <span class="character character14">C<p></p>C<br></span>
                <span class="character character15">T<p></p>T<br></span>
                <span class="character character16">S<p></p>S<br></span>
            </button>
        </div>
    </nav>
</div>
</header>
<div class="main">
        <div class="hero_content d-flex justify-content-center">
            <h1 class="hero_titles ">
            <span class="hero_title">
                <span class="a1" style="animation-delay: 0s;">D</span>
                <span class="a2" style="animation-delay: 0.03s;">E</span>
                <span class="a3" style="animation-delay: 0.06s;">L</span>
                <span class="a4" style="animation-delay: 0.09s;">I</span>
                <span class="a5" style="animation-delay: 0.12s;">C</span>
                <span class="a6" style="animation-delay: 0.15s;">I</span>
                <span class="a7" style="animation-delay: 0.18s;">O</span>
                <span class="a8" style="animation-delay: 0.21s;">U</span>
                <span class="a9" style="animation-delay: 0.24s;">S</span>
                <span class="a10" style="animation-delay: 0.27s;">.</span>
            </span>
            <span class="hero_title">
                <span class="a11" style="animation-delay: 0.1s;">R</span>
                <span class="a12" style="animation-delay: 0.13s;">E</span>
                <span class="a13" style="animation-delay: 0.16s;">F</span>
                <span class="a14" style="animation-delay: 0.19s;">R</span>
                <span class="a15" style="animation-delay: 0.22s;">E</span>
                <span class="a16" style="animation-delay: 0.25s;">S</span>
                <span class="a17" style="animation-delay: 0.28s;">H</span>
                <span class="a18" style="animation-delay: 0.31s;">I</span>
                <span class="a19" style="animation-delay: 0.34s;">N</span>
                <span class="a20" style="animation-delay: 0.37s;">G</span>
                <span class="a21" style="animation-delay: 0.4s;">.</span>
            </span>
            <span class="hero_title">
                <span class="a22" style="animation-delay: 0.2s;">P</span>
                <span class="a23" style="animation-delay: 0.23s;">E</span>
                <span class="a24" style="animation-delay: 0.26s;">P</span>
                <span class="a25" style="animation-delay: 0.29s;">S</span>
                <span class="a26" style="animation-delay: 0.32s;">I</span>
                <span class="a27" style="animation-delay: 0.35s;">.</span>
            </span>
            </h1>
            <div class="hero-button">
                <span></span>
                <b>SCROLL</b>
            </div>
        </div>
        <div class="hero_video-content">
            <video src="http://wsy.henjiyuan.com/video/pepsi-thatswhatilike-hero-video-v1.mp4" autoplay loop muted></video>
        </div>
    <section>
        <div class="promotion">
            <div class="promotion-left">
                <h1 class="promotion-title">
                    <span>ALL YOUR</span>
                    <span>FAVORITE FLAVORS.</span>
                    <span>ALL RIGHT HERE.</span>
                </h1>
                <p>
                    Pepsi. Diet Pepsi. Pepsi Zero Sugar. The gang’s all here. Compare flavors, get nutritional facts and check out ingredients for all our Pepsi products.
                </p>
                <a href="#" class="btn btn-outline-light my-2 my-sm-0">
                    <span class="character character1 ml-2">V<p></p>V<br></span>
                    <span class="character character2">I<p></p>I<br></span>
                    <span class="character character3">E<p></p>E<br></span>
                    <span class="character character4 mr-1">W<p></p>W<br></span>
                    <span class="character character5">P<p></p>P<br></span>
                    <span class="character character6">R<p></p>R<br></span>
                    <span class="character character7">O<p></p>O<br></span>
                    <span class="character character8">D<p></p>D<br></span>
                    <span class="character character9">U<p></p>U<br></span>
                    <span class="character character10">C<p></p>C<br></span>
                    <span class="character character11">T<p></p>T<br></span>
                    <span class="character character12">S<p></p>S<br></span>
                </a>
            </div>
            <div class="promotion-right">
                <img src="images/promotion1-hero_v2.png" alt="">
            </div>
        </div>
    </section>
    <div class="summer_video">
        <video src="http://wsy.henjiyuan.com/video/summergram.mp4" autoplay loop muted></video>
    </div>
    <div class="pepsi-zero">
        <div class="promotion">
            <div class="pepsi">
                <img src="images/Pepsi_Black_Bottle_24oz_RGB_cropped.png" alt="">
            </div>
            <div class="promotion-1">
                <h1 class="promotion-title1">
                    <span class="asf">PEPSI ZERO SUGAR.</span>
                    <span>ALL THE FLAVOR.</span>
                    <span>ZERO THE SUGAR.</span>
                </h1>
                <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide">
                                <img src="images/lb1.jpg" alt="">
                            </div>
                            <div class="swiper-slide">
                                <img src="images/lb2.jpg" alt="">
                            </div>
                        </div>
                        <!-- 如果需要分页器 -->
                        <div class="swiper-pagination"></div>

                        <!-- 如果需要导航按钮 -->
                        <!--<div class="swiper-button-prev"></div>-->
                        <!--<div class="swiper-button-next"></div>-->
                    </div>
                </div>


            </div>
        </div>
    </div>
    <div class="pepsi-flavors">
        <div class="flavors-wrapper">
            <div class="promotion-left promotion-left1">
                <img src="images/flavors-cans.png" alt="">
            </div>
            <div class="promotion-right1">
                <img src="images/flavors-title.png" alt="">
                <div class="promotion-video promotion-video1">
                    <i class="far fa-play-circle"></i>
                    <p>WATCH NOW</p>
                </div>
            </div>
        </div>
    </div>
    <div class="socior">
        <div class="socior-h1">
            <h1>STAY ON THE PULSE. FOLLOW PEPSI.</h1>
        </div>
        <div class="socior-item">
            <div class="socior-item-1">
                <a href="#"><img src="images/social-twitter.png" alt=""></a>
            </div>
            <div class="socior-item-2">
                <a href="#"><img src="images/social-facebook.png" alt=""></a>
            </div>
            <div class="socior-item-3">
                <a href="#"><img src="images/social-instagram.png" alt=""></a>
            </div>
            <div class="socior-item-4">
                <a href="#"><img src="images/social-youtube.png" alt=""></a>
            </div>
        </div>
    </div>
</div>
<footer>
    <a href="#" class="footer-logo"><img src="images/logo-large.png" alt=""></a>
    <ul>
        <li><a href="#">CONTACT US</a></li>
        <li><a href="#">COPYRIGHT</a></li>
        <li><a href="#">SERVE PEPSI</a></li>
        <li><a href="">TERMS & CONDITIONS</a></li>
        <li><a href="">PRODUCT FACTS</a></li>
        <li><a href="">ABOUT OUR ADS</a></li>
        <li><a href="">PRIVACY POLICY</a></li>
        <li><a href="">SERVE PEPSI</a></li>
    </ul>
    <div class="footer-social">
        <button class="btn btn-outline-light my-2 my-sm-0 btn1">
            <span class="character character1 ml-2">S<p></p>S<br></span>
            <span class="character character2">U<p></p>U<br></span>
            <span class="character character3">B<p></p>B<br></span>
            <span class="character character4">S<p></p>S<br></span>
            <span class="character character5">C<p></p>C<br></span>
            <span class="character character6">R<p></p>R<br></span>
            <span class="character character7">I<p></p>I<br></span>
            <span class="character character8">B<p></p>B<br></span>
            <span class="character character9 mr-1">E<p></p>E<br></span>
            <span class="character character10" >T<p></p>T<br></span>
            <span class="character character11 mr-1">O<p></p>O<br></span>
            <span class="character character12">N<p></p>N<br></span>
            <span class="character character13">E<p></p>E<br></span>
            <span class="character character14">W<p></p>W<br></span>
            <span class="character character15">S<p></p>S<br></span>
            <span class="character character16">L<p></p>L<br></span>
            <span class="character character17">E<p></p>E<br></span>
            <span class="character character18">T<p></p>T<br></span>
            <span class="character character19">T<p></p>T<br></span>
            <span class="character character20">E<p></p>E<br></span>
            <span class="character character21">R<p></p>R<br></span>
        </button>
        <div class=footer__social-img>
            <a class=footer__social-link href="#"><img src="images/xiaoniao.png" class="opa"></a>
            <a class=footer__social-link href="#"><img src="images/xiangji.png" class="opa"></a>
            <a class=footer__social-link href="#"><img src="images/shipin.png" class="opa"></a>
            <a class=footer__social-link href="#"><img src="images/F.png" class="opa"></a>
        </div>
    </div>
</footer>
<div class="top">
    <img src="images/logo-large.png" alt="" class="sss">
    <i class="fas fa-angle-up"></i>
</div>
<script src="swiper-4.5.0/dist/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.slim.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>